<template>
  <el-aside :width="isCollapse ? '64px' : '260px'" class="admin-sidebar" :class="{ 'is-collapse': isCollapse }">
    <div class="sidebar-header">
      <div class="logo-container" :class="{ 'collapsed': isCollapse }">
        <div class="logo" @click="handleLogoClick">☁️</div>
        <transition name="fade">
          <div v-show="!isCollapse" class="logo-text">
            <h2>云梦智学</h2>
            <el-tag type="primary" size="small">管理控制台</el-tag>
          </div>
        </transition>
      </div>
    </div>

    <!-- 灵动的折叠按钮 -->
    <div class="floating-collapse-btn" @click="handleToggleCollapse" :class="{ 'collapsed': isCollapse }">
      <el-icon class="collapse-icon">
        <ArrowRight v-if="isCollapse" />
        <ArrowLeft v-else />
      </el-icon>
      <div class="btn-ripple"></div>
    </div>

    <!-- 菜单容器 -->
    <div class="menu-container">
      <el-menu :default-active="activeMenu" :collapse="isCollapse" :collapse-transition="false"
        background-color="rgba(30, 41, 59, 0.5)" text-color="rgba(255, 255, 255, 0.7)" active-text-color="#fff"
        :router="true">

        <template v-for="menu in menuConfig" :key="menu.index">
          <!-- 普通菜单项 -->
          <el-menu-item v-if="!menu.children" :index="menu.index" class="custom-menu-item">
            <el-icon>
              <component :is="getIconComponent(menu.icon)" />
            </el-icon>
            <span>{{ menu.title }}</span>
          </el-menu-item>

          <!-- 子菜单 -->
          <el-sub-menu v-else :index="menu.index" class="custom-sub-menu">
            <template #title>
              <el-icon>
                <component :is="getIconComponent(menu.icon)" />
              </el-icon>
              <span>{{ menu.title }}</span>
            </template>
            <el-menu-item v-for="child in menu.children" :key="child.index" :index="child.index"
              class="custom-menu-item child-item">
              <el-icon>
                <component :is="getIconComponent(child.icon)" />
              </el-icon>
              <span>{{ child.title }}</span>
            </el-menu-item>
          </el-sub-menu>
        </template>
      </el-menu>
    </div>

    <!-- 页脚信息 -->
    <div class="sidebar-footer" :class="{ 'collapsed': isCollapse }">
      <transition name="fade">
        <div v-show="!isCollapse" class="footer-content">
          <div class="company-info">
            <div class="company-logo">🌟</div>
            <div class="company-text">
              <div class="company-name">云梦科技</div>
              <div class="company-desc">Yunmeng Technology</div>
            </div>
          </div>
          <div class="version-info">
            <span>v1.0.0</span>
          </div>
        </div>
      </transition>
      <transition name="fade">
        <div v-show="isCollapse" class="footer-collapsed">
          <div class="company-logo-mini">🌟</div>
        </div>
      </transition>
    </div>
  </el-aside>
</template>

<script setup>
import {
  DataAnalysis,
  User,
  UserFilled,
  Avatar,
  Postcard,
  Document,
  Connection,
  Grid,
  VideoPlay,
  ChatDotRound,
  Trophy,
  Setting,
  TrendCharts,
  Tools,
  Search,
  ArrowRight,
  ArrowLeft,
  Key
} from '@element-plus/icons-vue'
import { menuConfig } from '../config/menuConfig.js'
import { useRouter } from 'vue-router'

// 获取路由实例
const router = useRouter()

// 图标映射
const iconMap = {
  DataAnalysis,
  User,
  UserFilled,
  Avatar,
  Postcard,
  Document,
  Connection,
  Grid,
  VideoPlay,
  ChatDotRound,
  Trophy,
  Setting,
  TrendCharts,
  Tools,
  Search,
  Key
}

// 获取图标组件的方法
const getIconComponent = (iconName) => {
  return iconMap[iconName] || Document
}

// Props
const props = defineProps({
  activeMenu: {
    type: String,
    default: ''
  },
  isCollapse: {
    type: Boolean,
    default: false
  }
})

// Emits
const emit = defineEmits(['update:isCollapse'])

// 方法
const handleToggleCollapse = () => {
  emit('update:isCollapse', !props.isCollapse)
}

const handleLogoClick = () => {
  router.push('/index')
}
</script>

<style scoped>
/* 侧边栏样式 */
.admin-sidebar {
  background: linear-gradient(180deg, #1e293b 0%, #0f1629 50%, #0a0e1a 100%);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 1000;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
  overflow-x: hidden;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

/* 菜单容器样式 */
.menu-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  margin-bottom: 10px;
  padding: 8px 0;
  position: relative;
}

/* 添加顶部渐变遮罩效果 */
.menu-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.8), transparent);
  pointer-events: none;
  z-index: 10;
}

/* 添加底部渐变遮罩效果 */
.menu-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(0deg, rgba(30, 41, 59, 0.8), transparent);
  pointer-events: none;
  z-index: 10;
}

.menu-container::-webkit-scrollbar {
  width: 4px;
}

.menu-container::-webkit-scrollbar-track {
  background: transparent;
}

.menu-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

.menu-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 菜单容器基础样式调整 - 适配新的背景色 */
.menu-container .el-menu {
  border: none;
  /* 移除透明背景相关的样式覆盖 */
}

/* 主菜单容器整体样式 */
.menu-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  margin-bottom: 10px;
  padding: 8px 0;
  position: relative;
  /* 添加轻微的背景渐变增强层次感 */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 50%, rgba(0, 0, 0, 0.02) 100%);
}

/* Element Plus 菜单项样式重置 */
.menu-container .el-menu-item,
.menu-container .el-sub-menu__title {
  height: 48px;
  line-height: 48px;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

.menu-container .el-menu-item .el-icon,
.menu-container .el-sub-menu__title .el-icon {
  margin-right: 8px;
  font-size: 16px;
}

/* 自定义菜单项样式 - 圆角矩形液态玻璃效果 */
.custom-menu-item {
  margin: 4px 8px;
  border-radius: 8px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding-left: 16px !important;
  padding-right: 16px !important;
  position: relative;
  overflow: hidden;
}

.custom-menu-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.6s ease;
}

.custom-menu-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transform: translateX(4px) scale(1.02);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.custom-menu-item:hover::before {
  left: 100%;
}

.custom-menu-item.is-active {
  background: rgba(99, 102, 241, 0.15) !important;
  backdrop-filter: blur(30px);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: white !important;
  box-shadow:
    0 8px 32px rgba(99, 102, 241, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.custom-menu-item.is-active::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 16px;
  width: 4px;
  height: 20px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 2px;
  transform: translateY(-50%);
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.6);
}

/* 子菜单项样式 - 圆角矩形液态玻璃效果，增加缩进 */
.child-item {
  margin: 2px 12px 2px 24px !important;
  /* 增加左侧缩进 */
  border-radius: 6px;
  font-size: 0.9rem;
  padding-left: 32px !important;
  /* 增加内部缩进 */
  padding-right: 16px !important;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
  height: 42px !important;
  /* 稍微减小高度 */
  line-height: 42px !important;
}

/* 添加层级指示线 */
.child-item::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  width: 8px;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%);
  transition: all 0.3s ease;
}

.child-item::after {
  content: '';
  position: absolute;
  left: 16px;
  top: -50%;
  width: 1px;
  height: 100%;
  background: rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
}

.child-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transform: translateX(3px) scale(1.01);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.child-item:hover::before {
  width: 12px;
  background: rgba(99, 102, 241, 0.6);
}

.child-item:hover::after {
  background: rgba(99, 102, 241, 0.3);
}

.child-item.is-active {
  background: rgba(139, 92, 246, 0.12) !important;
  backdrop-filter: blur(25px);
  border: 1px solid rgba(139, 92, 246, 0.25);
  color: #c4b5fd !important;
  box-shadow:
    0 6px 24px rgba(139, 92, 246, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.child-item.is-active::before {
  width: 12px;
  background: rgba(139, 92, 246, 0.8);
}

.child-item.is-active::after {
  background: rgba(139, 92, 246, 0.5);
}

/* 子菜单标题样式 - 圆角矩形液态玻璃效果 */
.custom-sub-menu .el-sub-menu__title {
  margin: 4px 8px;
  border-radius: 8px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding-left: 20px !important;
  padding-right: 20px !important;
  position: relative;
  overflow: hidden;
}

.custom-sub-menu .el-sub-menu__title::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.6s ease;
}

.custom-sub-menu .el-sub-menu__title:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transform: translateX(4px) scale(1.02);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.custom-sub-menu .el-sub-menu__title:hover::before {
  left: 100%;
}

/* 展开的子菜单标题样式 */
.custom-sub-menu.is-opened .el-sub-menu__title {
  background: rgba(99, 102, 241, 0.1) !important;
  backdrop-filter: blur(30px);
  border: 1px solid rgba(99, 102, 241, 0.2);
  color: #a5b4fc !important;
  box-shadow:
    0 8px 32px rgba(99, 102, 241, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* 菜单项图标的液态效果 */
.custom-menu-item .el-icon,
.child-item .el-icon,
.custom-sub-menu .el-sub-menu__title .el-icon {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 0 0 transparent);
}

.custom-menu-item:hover .el-icon,
.child-item:hover .el-icon,
.custom-sub-menu .el-sub-menu__title:hover .el-icon {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

.custom-menu-item.is-active .el-icon {
  filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.6));
}

.child-item.is-active .el-icon {
  filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.6));
}

/* 添加呼吸动画效果给激活状态 */
@keyframes breathe {

  0%,
  100% {
    box-shadow:
      0 8px 32px rgba(99, 102, 241, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }

  50% {
    box-shadow:
      0 12px 40px rgba(99, 102, 241, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
}

.custom-menu-item.is-active {
  animation: breathe 3s ease-in-out infinite;
}

/* 覆盖Element Plus透明背景设置 - 针对折叠弹出菜单 */
.admin-sidebar.is-collapse .el-sub-menu .el-menu,
.el-menu--collapse .el-sub-menu>.el-menu,
.admin-sidebar.is-collapse .custom-sub-menu .el-menu,
.admin-sidebar.is-collapse .el-sub-menu>.el-menu,
div.el-popper .el-menu[style*="background-color: transparent"] {
  background-color: rgba(30, 41, 59, 0.85) !important;
  background: rgba(30, 41, 59, 0.85) !important;
  backdrop-filter: blur(25px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px !important;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  padding: 8px !important;
  margin-left: 8px !important;
  min-width: 220px !important;
}

/* 确保弹出菜单容器也有正确的背景 */
.el-popper[x-placement^="right"] .el-menu,
.el-popper[data-popper-placement^="right"] .el-menu {
  background-color: rgba(30, 41, 59, 0.85) !important;
  background: rgba(30, 41, 59, 0.85) !important;
}

/* 折叠状态下子菜单项的样式 - 使用更高优先级 */
.admin-sidebar.is-collapse .el-sub-menu .el-menu .el-menu-item,
.el-menu--collapse .el-sub-menu .el-menu .el-menu-item,
.admin-sidebar.is-collapse .custom-sub-menu .el-menu .el-menu-item {
  margin: 2px 0 !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(15px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  transition: all 0.3s ease !important;
  height: 40px !important;
  line-height: 40px !important;
  padding: 0 16px !important;
  font-size: 0.9rem !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.admin-sidebar.is-collapse .el-sub-menu .el-menu .el-menu-item:hover,
.el-menu--collapse .el-sub-menu .el-menu .el-menu-item:hover,
.admin-sidebar.is-collapse .custom-sub-menu .el-menu .el-menu-item:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  transform: translateX(4px) !important;
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  color: white !important;
}

.admin-sidebar.is-collapse .el-sub-menu .el-menu .el-menu-item.is-active,
.el-menu--collapse .el-sub-menu .el-menu .el-menu-item.is-active,
.admin-sidebar.is-collapse .custom-sub-menu .el-menu .el-menu-item.is-active {
  background: rgba(139, 92, 246, 0.25) !important;
  border-color: rgba(139, 92, 246, 0.4) !important;
  color: #e0e7ff !important;
  box-shadow:
    0 4px 15px rgba(139, 92, 246, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.admin-sidebar.is-collapse .el-sub-menu .el-menu .el-menu-item .el-icon {
  margin-right: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.admin-sidebar.is-collapse .el-sub-menu .el-menu .el-menu-item:hover .el-icon {
  transform: scale(1.1);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
}

.admin-sidebar.is-collapse .el-sub-menu .el-menu .el-menu-item.is-active .el-icon {
  filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.6));
}

/* 收缩状态下子菜单标题的提示箭头 */
.admin-sidebar.is-collapse .el-sub-menu .el-sub-menu__title::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid rgba(255, 255, 255, 0.6);
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
}

.admin-sidebar.is-collapse .el-sub-menu:hover .el-sub-menu__title::after {
  border-left-color: rgba(99, 102, 241, 0.8);
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  height: 85px;
  box-sizing: border-box;
  overflow: visible;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
  transition: justify-content 0.3s ease;
}

.logo-container.collapsed {
  justify-content: center;
}

.logo {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.logo:hover {
  transform: scale(1.05) rotate(5deg);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.logo-text h2 {
  font-size: 1.3rem;
  color: white;
  margin: 0 0 6px 0;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.logo-text .el-tag {
  font-size: 0.7rem;
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #a5b4fc;
}

/* 灵动的浮动折叠按钮 */
.floating-collapse-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(-50%);
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
  z-index: 1001;
  border: 2px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.floating-collapse-btn.collapsed {
  right: 18px;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
}

.floating-collapse-btn:hover {
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 25px rgba(99, 102, 241, 0.6);
}

.floating-collapse-btn.collapsed:hover {
  box-shadow: 0 6px 25px rgba(139, 92, 246, 0.6);
}

.collapse-icon {
  font-size: 14px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}

.floating-collapse-btn:hover .collapse-icon {
  transform: scale(1.2);
}

/* 按钮点击涟漪效果 */
.btn-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.floating-collapse-btn:active .btn-ripple {
  width: 50px;
  height: 50px;
}

/* 按钮悬浮动画 */
@keyframes float {

  0%,
  100% {
    transform: translateY(-50%) translateX(0);
  }

  50% {
    transform: translateY(-50%) translateX(1px);
  }
}

.floating-collapse-btn:not(:hover) {
  animation: float 3s ease-in-out infinite;
}

/* 页脚样式 */
.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  margin-top: auto;
  transition: all 0.3s ease;
}

.sidebar-footer.collapsed {
  padding: 16px 10px;
  text-align: center;
}

.footer-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}

.company-info {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.company-logo {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.company-text {
  flex: 1;
}

.company-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: white;
  margin-bottom: 2px;
}

.company-desc {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
}

.version-info {
  text-align: center;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.version-info span {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 8px;
  border-radius: 10px;
}

.footer-collapsed {
  display: flex;
  justify-content: center;
  align-items: center;
}

.company-logo-mini {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.company-logo-mini:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

/* 淡入淡出动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>